import React, { Fragment, PureComponent } from 'react';
import { connect } from 'dva';
import { DateDiff, DateStamp, FormatnumberZero, Mover, NumberDivide } from '@/function.js';
// 视图插件
import { Button, Card, Col, Divider, Form, notification, Row, Select } from 'antd';
// 外部组件
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import Fundanalysis from './Fundanalysis.js';
import html2canvas from 'html2canvas';
import StandardTablePro from '@/components/UpgradeReportStandardTable/StandardTablePro';

// css OR less预编译器
// import styles from './All.less';

// 图片

const SelectOption = Select.Option;

/**
 *  Describe:数据连接
 *  Created by xjc on 2019/5/15
 */

@connect(({ newTwoDaily, loading }) => ({
  newTwoDaily,
  loading: loading.models.newTwoDaily,
}))
@Form.create()
class NewTwoDaily extends PureComponent {
  componentWillMount() {}

  /**
   *  Describe:当前状态
   *  Created by xjc on 2019/5/15
   */

  state = {
    dates: [],
    cropFlag: false,
    dataSourceTotal: {
      data: [],
      total: [],
      code: 0,
    },
    dataSourceSub: {
      data: [],
      total: [],
      code: 0,
    },
    charts: {},
  };

  onSelect(value) {
    const that = this;
    const { dispatch } = that.props;
    const netDate = value;
    /* 导入列表数据 */
    dispatch({
      type: 'newTwoDaily/GetData',
      payload: {
        netDate,
      },
      callback: res => {
        const dataSourceTotal = {
          title: `${netDate} 二号基金日报`,
          titleTotal: false,
          code: 1,
          data: [
            {
              netAssets: res.netAssets,
              cash: res.cash,
              totalAssets: res.totalAssets,
              todayProfit: res.todayProfit,
              availableCredit: res.availableCredit,
              unitNetValue: res.unitNetValue,
              fundChg: res.fundChg,
              spyChg: res.spyChg,
              recentMonthProfitValue: res.recentMonthProfitValue,
              recentYearProfitValue: res.recentYearProfitValue,
            },
          ],
          total: [],
          columns: [
            {
              title: '净资产',
              type: 'string',
              dataIndex: 'netAssets',
              width: 75,
              render: (value, row, index) => {
                return !value && value !== 0 ? null : <span>{NumberDivide(value, 0)}</span>;
              },
            },
            {
              title: '当日盈亏',
              dataIndex: 'todayProfit',
              width: 75,
              type: 'number',
              render: (value, row, index) => {
                return !value && value !== 0 ? null : <span>{NumberDivide(value, 0)}</span>;
              },
            },
            {
              title: '负债',
              dataIndex: 'cash',
              width: 75,
              type: 'number',
              render: (value, row, index) => {
                return !value && value !== 0 ? null : <span>{NumberDivide(value, 0)}</span>;
              },
            },
            {
              title: '总资产',
              dataIndex: 'totalAssets',
              width: 75,
              type: 'number',
              render: (value, row, index) => {
                return !value && value !== 0 ? null : <span>{NumberDivide(value, 0)}</span>;
              },
            },

            {
              title: '可用额度',
              dataIndex: 'availableCredit',
              width: 75,
              type: 'number',
              render: (value, row, index) => {
                return !value && value !== 0 ? null : <span>{NumberDivide(value, 0)}</span>;
              },
            },
            {
              title: '单位净值',
              dataIndex: 'unitNetValue',
              width: 75,
              type: 'number',
              render: (value, row, index) => {
                return value === null ? null : <span>{NumberDivide(value, 4)}</span>;
              },
            },
            {
              title: '当日涨跌幅',
              dataIndex: 'fundChg',
              width: 75,
              type: 'number',
              render: (value, row, index) => {
                return value === null ? null : (
                  <span>{NumberDivide(mathService.mul(value, 100), 2, '%')}</span>
                );
              },
            },
            {
              title: '当日spy涨跌幅',
              dataIndex: 'spyChg',
              width: 75,
              type: 'number',
              render: (value, row, index) => {
                return value === null ? null : (
                  <span>{NumberDivide(mathService.mul(value, 100), 2, '%')}</span>
                );
              },
            },
            {
              title: '近一月收益率',
              dataIndex: 'recentMonthProfitValue',
              width: 75,
              type: 'number',
              render: (value, row, index) => {
                return value === null ? null : (
                  <span>{NumberDivide(mathService.mul(value, 100), 2, '%')}</span>
                );
              },
            },
            {
              title: '今年以来收益率',
              dataIndex: 'recentYearProfitValue',
              width: 75,
              type: 'number',
              render: (value, row, index) => {
                return value === null ? null : (
                  <span>{NumberDivide(mathService.mul(value, 100), 2, '%')}</span>
                );
              },
            },
          ],
        };
        that.setState({
          dataSourceTotal,
        });
      },
    });
    dispatch({
      type: 'newTwoDaily/GetDataItem',
      payload: {
        netDate,
      },
      callback: res => {
        const dataSourceSub = {
          title: false,
          code: 1,
          data: res,
          total: [],
          columns: [
            {
              title: '类别',
              dataIndex: 'itemType',
              width: 75,
              type: 'string',
            },
            {
              title: '市值/敞口',
              dataIndex: 'marketValue',
              width: 75,
              type: 'number',
              render: (value, row, index) => {
                return !value && value !== 0 ? null : <span>{NumberDivide(value, 0)}</span>;
              },
            },
            {
              title: '当日盈亏',
              dataIndex: 'todayProfitValue',
              width: 75,
              type: 'number',
              render: (value, row, index) => {
                return !value && value !== 0 ? null : <span>{NumberDivide(value, 0)}</span>;
              },
            },
            {
              title: '卖出',
              dataIndex: 'tradeGet',
              width: 75,
              type: 'number',
              render: (value, row, index) => {
                return !value && value !== 0 ? null : <span>{NumberDivide(value, 0)}</span>;
              },
            },
            {
              title: '买入',
              dataIndex: 'tradePay',
              width: 75,
              type: 'number',
              render: (value, row, index) => {
                return !value && value !== 0 ? null : <span>{NumberDivide(value, 0)}</span>;
              },
            },
          ],
        };
        that.setState({
          dataSourceSub,
        });
      },
    });
  }

  HtmlCrop() {
    const that = this;
    const key = `open${Date.now()}`;
    const { dispatch } = that.props;
    const btn = (
      <Button
        type="primary"
        size="small"
        onClick={() => {
          notification.close(key);
          that.setState({
            cropFlag: true,
          });
          html2canvas(document.getElementById('crop'), {
            scale: 1,
          }).then(canvas => {
            const imgUrl = canvas.toDataURL();
            // dataURLtoFile(imgUrl, 'aaa')
            // 获取截图base64
            dispatch({
              type: 'newTwoDaily/CommitImage',
              payload: {
                base64Str: imgUrl,
                jobName: '交易小结',
              },
              callback: res => {
                that.setState({
                  cropFlag: false,
                });
              },
            });
          });
        }}
      >
        确定
      </Button>
    );
    notification.open({
      message: 'Notification Title',
      description: '是否上传',
      btn,
      key,
      onClose: close,
    });
  }

  /**
   *  Describe:视图
   *  Created by xjc on 2019/5/15
   */

  render() {
    const { dates, cropFlag, dataSourceTotal, dataSourceSub, charts } = this.state;
    const selectList = [];
    if (dates) {
      for (let i = 0; i < dates.length; i++) {
        const item = dates[i];
        selectList.push(
          <SelectOption value={item.split(' ')[0]}>{item.split(' ')[0]}</SelectOption>
        );
      }
    }
    return (
      <PageHeaderWrapper>
        <Card>
          <Row>
            <Col span={12}>
              选择日期：{' '}
              <Select
                style={{ width: 200 }}
                onSelect={this.onSelect.bind(this)}
                placeholder="请选择日期"
              >
                {selectList}
              </Select>
            </Col>
            {/* <Col span={12} style={{textAlign:'right'}}> */}
            {/* <Button */}
            {/* type={'primary'} */}
            {/* onClick={this.HtmlCrop.bind(this)} */}
            {/* loading={cropFlag} */}
            {/* loading={cropFlag} */}
            {/* style={{ margin: 8, width: '9rem' }} */}
            {/* ghost */}
            {/* > */}
            {/* 截图上传 */}
            {/* </Button> */}
            {/* </Col> */}
          </Row>
          <br />
          <div id="crop">
            <StandardTablePro dataSource={dataSourceTotal} closeScroll />
            <br />
            <StandardTablePro dataSource={dataSourceSub} closeScroll />
            <br />
            <br />
            <Fundanalysis charts={charts} />
          </div>
        </Card>
      </PageHeaderWrapper>
    );
  }

  componentDidMount() {
    const { dispatch } = this.props;
    const { dates } = this.state;
    const that = this;
    /* 导入select数据 */
    dispatch({
      type: 'newTwoDaily/GetDates',
      callback: res => {
        that.setState({
          dates: res.list,
        });
        const netDate = res.list[0].split(' ')[0];
        /* 导入列表数据 */
        dispatch({
          type: 'newTwoDaily/GetData',
          payload: {
            netDate,
          },
          callback: res => {
            const dataSourceTotal = {
              title: `${netDate} 二号基金日报`,
              titleTotal: false,
              code: 1,
              data: [
                {
                  netAssets: res.netAssets,
                  cash: res.cash,
                  totalAssets: res.totalAssets,
                  todayProfit: res.todayProfit,
                  availableCredit: res.availableCredit,
                  unitNetValue: res.unitNetValue,
                  fundChg: res.fundChg,
                  spyChg: res.spyChg,
                  recentMonthProfitValue: res.recentMonthProfitValue,
                  recentYearProfitValue: res.recentYearProfitValue,
                },
              ],
              total: [],
              columns: [
                {
                  title: '净资产',
                  type: 'string',
                  dataIndex: 'netAssets',
                  width: 75,
                  render: (value, row, index) => {
                    return !value && value !== 0 ? null : <span>{NumberDivide(value, 0)}</span>;
                  },
                },

                {
                  title: '当日盈亏',
                  dataIndex: 'todayProfit',
                  width: 75,
                  type: 'number',
                  render: (value, row, index) => {
                    return !value && value !== 0 ? null : <span>{NumberDivide(value, 0)}</span>;
                  },
                },
                {
                  title: '负债',
                  dataIndex: 'cash',
                  width: 75,
                  type: 'number',
                  render: (value, row, index) => {
                    return !value && value !== 0 ? null : <span>{NumberDivide(value, 0)}</span>;
                  },
                },
                {
                  title: '总资产',
                  dataIndex: 'totalAssets',
                  width: 75,
                  type: 'number',
                  render: (value, row, index) => {
                    return !value && value !== 0 ? null : <span>{NumberDivide(value, 0)}</span>;
                  },
                },

                {
                  title: '可用额度',
                  dataIndex: 'availableCredit',
                  width: 75,
                  type: 'number',
                  render: (value, row, index) => {
                    return !value && value !== 0 ? null : <span>{NumberDivide(value, 0)}</span>;
                  },
                },
                {
                  title: '单位净值',
                  dataIndex: 'unitNetValue',
                  width: 75,
                  type: 'number',
                  render: (value, row, index) => {
                    return value === null ? null : <span>{NumberDivide(value, 4)}</span>;
                  },
                },
                {
                  title: '当日涨跌幅',
                  dataIndex: 'fundChg',
                  width: 75,
                  type: 'number',
                  render: (value, row, index) => {
                    return value === null ? null : (
                      <span>{NumberDivide(mathService.mul(value, 100), 2, '%')}</span>
                    );
                  },
                },
                {
                  title: '当日spy涨跌幅',
                  dataIndex: 'spyChg',
                  width: 75,
                  type: 'number',
                  render: (value, row, index) => {
                    return value === null ? null : (
                      <span>{NumberDivide(mathService.mul(value, 100), 2, '%')}</span>
                    );
                  },
                },
                {
                  title: '近一月收益率',
                  dataIndex: 'recentMonthProfitValue',
                  width: 75,
                  type: 'number',
                  render: (value, row, index) => {
                    return value === null ? null : (
                      <span>{NumberDivide(mathService.mul(value, 100), 2, '%')}</span>
                    );
                  },
                },
                {
                  title: '今年以来收益率',
                  dataIndex: 'recentYearProfitValue',
                  width: 75,
                  type: 'number',
                  render: (value, row, index) => {
                    return value === null ? null : (
                      <span>{NumberDivide(mathService.mul(value, 100), 2, '%')}</span>
                    );
                  },
                },
              ],
            };
            that.setState({
              dataSourceTotal,
            });
          },
        });
        dispatch({
          type: 'newTwoDaily/GetDataItem',
          payload: {
            netDate,
          },
          callback: res => {
            const dataSourceSub = {
              title: false,
              code: 1,
              data: res,
              total: [],
              columns: [
                {
                  title: '类别',
                  dataIndex: 'itemType',
                  width: 75,
                  type: 'string',
                },
                {
                  title: '市值/敞口',
                  dataIndex: 'marketValue',
                  width: 75,
                  type: 'number',
                  render: (value, row, index) => {
                    return !value && value !== 0 ? null : <span>{NumberDivide(value, 0)}</span>;
                  },
                },
                {
                  title: '当日盈亏',
                  dataIndex: 'todayProfitValue',
                  width: 75,
                  type: 'number',
                  render: (value, row, index) => {
                    return !value && value !== 0 ? null : <span>{NumberDivide(value, 0)}</span>;
                  },
                },
                {
                  title: '卖出',
                  dataIndex: 'tradeGet',
                  width: 75,
                  type: 'number',
                  render: (value, row, index) => {
                    return !value && value !== 0 ? null : <span>{NumberDivide(value, 0)}</span>;
                  },
                },
                {
                  title: '买入',
                  dataIndex: 'tradePay',
                  width: 75,
                  type: 'number',
                  render: (value, row, index) => {
                    return !value && value !== 0 ? null : <span>{NumberDivide(value, 0)}</span>;
                  },
                },
              ],
            };
            that.setState({
              dataSourceSub,
            });
          },
        });
        dispatch({
          type: 'newTwoDaily/GetCurve',
          callback: res => {
            that.setState({ charts: res });
          },
        });
      },
    });
  }

  componentWillUnmount() {}
}

export default NewTwoDaily;
